<template>
    <!-- 表格间距需要缩短 -->
    <div class="app-container">
        <div id="examineProgress">
            <span>当前共有</span>
            <span>{{workStatues.notExamined}} 份待审核</span>
            <span>{{workStatues.alreadyExamined}} 份已审核</span>
            <span>{{workStatues.notSubmitted}} 份未提交</span>
        </div>
        <el-form :model="filter">
            <el-row :gutter="10">
                <el-col :span="16">
                    <el-form-item label="审核状态" label-width="100px" class="item1">
                        <el-radio-group v-model="filter.examineStatusCode" @input="radio_change">
                            <el-radio :label="0">全部</el-radio>
                            <el-radio :label="1">待审核</el-radio>
                            <el-radio :label="2">已审核</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="5" :offset="1">
                    <el-form-item label="搜索" label-width="80px" class="item1">
                        <el-input v-model="filter.search" placeholder="请输入内容" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="2" align="right">
                    <el-form-item class="item1">
                        <el-button type="primary" icon="el-icon-search" size="medium" @click="selectByName">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="5">
                    <el-form-item label="企业所在市" label-width="100px" class="item2">
                        <el-select v-model="filter.city" placeholder="全部" @change="selectChange">
                            <el-option v-for="city in cities" :label="city" :value="city">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="1" :offset="16" align="left">
                    <el-form-item class="item2">
                        <el-button type="text" @click="passPatch" style="font-size: 15px;"
                            :disabled="!selected.multiSelectFlag">一键通过</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="1" align="center" style="width: 15px;">
                    <el-form-item label="|" label-width="22px" style="font-size: 15px" class="item2"></el-form-item>
                </el-col>
                <el-col :span="1" align="left">
                    <el-form-item class="item2">
                        <el-button type="text" @click="returnBackPatch" style="font-size: 15px;"
                            :disabled="!selected.multiSelectFlag">一键退回</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-table v-loading="listLoading" :data="showData" element-loading-text="Loading" border fit highlight-current-row
            :cell-style="{ padding: '3px 0' }" stripe header-cell-class-name="table_header"
            @selection-change="handleSelectionChange" :row-key="getRowKey" ref="inOrderTable">

            <el-table-column type="selection" :selectable="(row, index) => row.companyRecordStatus == 2"
                 width="45" align="center" :reserve-selection="true"></el-table-column>

            <el-table-column label="企业名" width="250" align="center">
                <template slot-scope="scope">
                    {{ scope.row.companyChineseName }}
                </template>
            </el-table-column>

            <el-table-column label="所属地区" width="150" align="center">
                <template slot-scope="scope">
                    {{ scope.row.companyLocation }}
                </template>
            </el-table-column>

            <el-table-column label="组织机构代码" width="120" align="center">
                <template slot-scope="scope">
                    {{ scope.row.companyInstCode }}
                </template>
            </el-table-column>

            <el-table-column label="企业性质" width="140" align="center">
                <template slot-scope="scope">
                    {{ scope.row.companyNature }}
                </template>
            </el-table-column>

            <el-table-column label="所属行业" width="150" align="center">
                <template slot-scope="scope">
                    {{ scope.row.companyIndustry }}
                </template>
            </el-table-column>

            <el-table-column label="主要经营业务" width="130" align="center">
                <template slot-scope="scope">
                    {{ scope.row.companyBusiness }}
                </template>
            </el-table-column>

            <el-table-column label="提交时间" width="150" align="center">
                <template slot-scope="scope">
                    {{ scope.row.companySubmitTime }}
                </template>
            </el-table-column>

            <el-table-column label="审核状态" width="100" align="center">
                <template slot-scope="scope">
                    {{ scope.row.companyRecordStatus < 2 ? "未提交" : scope.row.companyRecordStatus == 3 ? "已审批退回" : scope.row.companyRecordStatus == 4 ? "已审批通过" : "未审批" }}
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="185" align="center">
                <template slot-scope="scope">
                    <el-button @click="showForm(scope.row)" type="text" :disabled="scope.row.companyRecordStatus < 2">查看</el-button>
                    <el-button @click="passSingle(scope.row)" type="text" :disabled="selected.multiSelectFlag || scope.row.companyRecordStatus != 2">通过</el-button>
                    <el-button @click="returnBackSingle(scope.row)" type="text" :disabled="selected.multiSelectFlag || scope.row.companyRecordStatus != 2">退回</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" :current-page="page.currentPage"
            :page-sizes="[10, 20, 50]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalItems">
        </el-pagination>

        <el-dialog title="备案信息" :visible.sync="showingForm.showFlag" width="75%" top="10vh">
            <el-row>
                <el-col :span="19" style="border-right: 1px solid black;">
                    <el-form :model="showingForm.data">
                        <el-row>
                            <el-col :span="23" :offset="1" align="left">
                                <el-form-item label="企业名称" label-width="100px">
                                    {{ showingForm.data.companyChineseName }}
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="23" :offset="1">
                                <el-form-item label="英文名称" label-width="100px">
                                    {{ showingForm.data.companyEnglishName != '' ? showingForm.data.companyEnglishName : '无' }}
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="8" :offset="1">
                                <el-form-item label="组织机构代码" label-width="100px">
                                    {{ showingForm.data.companyInstCode }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :offset="3">
                                <el-form-item label="邮政编码" label-width="100px">
                                    {{ showingForm.data.companyPostcode }}
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="8" :offset="1">
                                <el-form-item label="所属地区" label-width="100px">
                                    {{ showingForm.data.companyLocation }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :offset="3">
                                <el-form-item label="所属行业" label-width="100px">
                                    {{ showingForm.data.companyIndustry }}
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :offset="1" :span="23">
                                <el-form-item label="企业性质" label-width="100px">
                                    {{ showingForm.data.companyNature }}
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :offset="1" :span="23">
                                <el-form-item label="主要经营业务" label-width="100px">
                                    {{ showingForm.data.companyBusiness }}
                                </el-form-item>
                            </el-col>
                        </el-row>


                        <el-row>
                            <el-col :span="8" :offset="1">
                                <el-form-item label="联系人" label-width="100px">
                                    {{ showingForm.data.companyContacts }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :offset="3">
                                <el-form-item label="联系电话" label-width="100px">
                                    {{ showingForm.data.companyPhone }}
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :offset="1" :span="23">
                                <el-form-item label="联系地址" label-width="100px">
                                    {{ showingForm.data.companyAddress }}
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="8" :offset="1">
                                <el-form-item label="传真" label-width="100px">
                                    {{ showingForm.data.companyFax }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :offset="3">
                                <el-form-item label="Email" label-width="100px">
                                    {{ showingForm.data.companyEmail }}
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-col>
                <el-col :span="5">
                    <div class="dialogDiv2">
                        <el-timeline>
                            <el-timeline-item
                                v-for="(activity, index) in activities"
                                :key="index"
                                :icon="activity.icon"
                                :type="activity.type"
                                :color="activity.color"
                                size="large"
                            >
                                <p class="timeline-name">{{ activity.name }}</p>
                                <p class="timeline-content" v-if="activity.idea != ''">
                                <span>退回备注: </span><span class="timeline-content__idea">{{ activity.idea }}</span>
                                </p>
                                <p class="timeline-content">{{ activity.timestamp }}</p>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>
        <el-dialog title="退回备注" :visible.sync="returnBackForm.showFlag" width="35%">
            <el-form :model="returnBackForm.data">
                <el-row>
                    <el-col :span="14">
                        <el-form-item label="退回原因" label-width="80px">
                            <el-select v-model="returnBackForm.data.reason" placeholder="请选择">
                                <el-option v-for="reason in returnBackReasons" :label="reason" :value="reason">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="returnBackForm.data.reason == '其他'">
                    <el-col :span="18">
                        <el-form-item label="其他原因" label-width="80px">
                            <el-input type="textarea" :autosize="{ minRows: 0, maxRows: 4}"
                                placeholder="请输入内容"
                                v-model="returnBackForm.data.otherReasonDescription">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="returnBack" :disabled="this.returnBackForm.data.reason == '' || (this.returnBackForm.data.reason == '其他' && this.returnBackForm.data.otherReasonDescription == '')">确 定</el-button>
                <el-button @click="returnBackForm.showFlag = false">取 消</el-button>
            </span>
        </el-dialog>
        <el-dialog title="通过" :visible.sync="passConfirm.showFlag" width="35%">
            <el-form>
                <el-row>
                    <el-col :span="24">
                        确认通过备案信息吗？
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="pass">确 定</el-button>
                <el-button @click="passConfirm.showFlag = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getAllRecords, returnBackRecord, passRecord } from '@/api/province/recordExamine'
import store from '@/store'
import { getCompanyInfoHistory } from '@/api/common/queryHistory'
export default {
    data() {
        return {
            userId: store.getters.userId,
            workStatues: {
                notSubmitted: 0,
                notExamined: 0,
                alreadyExamined: 0
            },
            timer: null,
            totalData: [],
            showData: [],
            filteredData: [],
            listLoading: true,
            roles: [],
            page: {
                currentPage: 1,
                pageSize: 10,
                totalItems: 25,
            },
            cities: [],
            filter: {
                city: '全部',
                examineStatusCode: 0,
                search: ''
            },
            newUser: {
                creating: false,
                role: '',
                city: ''
            },
            showingForm: {
                showFlag: false,
                data: {
                    companyID: '',
                    companyCity: '',
                    companyLocation: '',
                    companyInstCode: '',
                    companyChineseName: '',
                    companyEnglishName: '',
                    companyNature: '',
                    companyIndustry: '',
                    companyBusiness: '',
                    companyContacts: '',
                    companyAddress: '',
                    companyPostcode: '',
                    companyPhone: '',
                    companyFax: '',
                    companyEmail: '',
                    companyRecordStatus: '',
                    companySubmitTime: ''
                },
            },
            selected: {
                selectedNum: 0,
                selectedItems: [],
                multiSelectFlag: false 
            },
            returnBackReasons: ['企业名称不规范', '企业组织机构代码有误', '企业邮政编码有误', '企业所属地区有误', '企业所属行业有误', '企业性质有误', '企业主要经营业务有误或描述不清晰', '企业联系人有误', '企业联系电话有误', '企业联系地址有误或描述不准确', '企业传真号码有误', '其他'],
            returnBackForm: {
                showFlag: false,
                data: {
                    reason: '',
                    otherReasonDescription: ''
                }
            },
            returnBackData: {
                items: null,
                comments: null
            },
            passConfirm: {
                showFlag: false
            },
            passSuccess: false,
            returnBackSuccess: false,
            activities: [],
            // leftDivHeight: '0px',
        }
    },
    created() {
        this.initialize()
    },
    methods: {
        dateCmp(a, b) {
            if (new Date(a.companySubmitTime).getTime() > new Date(b.companySubmitTime).getTime()) {
                return -1
            } else {
                return 1
            }
        },

        cmp(a, b) {
            if (a.companyRecordStatus == 2 && b.companyRecordStatus !== 2) {
                return -1
            } else if (a.companyRecordStatus !== 2 && b.companyRecordStatus == 2) {
                return 1
            } else {
                if (a.companyRecordStatus > 2 && b.companyRecordStatus < 2) {
                    return -1
                } else if (a.companyRecordStatus < 2 && b.companyRecordStatus > 2) {
                    return 1
                } else {
                    return this.dateCmp(a, b)
                }
            }
        },

        getWorkStatues() {
            this.workStatues.notSubmitted = 0
            this.workStatues.notExamined = 0
            this.workStatues.alreadyExamined = 0
            var len = this.totalData.length
            // console.log(len)
            for (var i = 0; i < len; ++i) {
                if (this.totalData[i].companyRecordStatus == 2) {
                    this.workStatues.notExamined++
                } else if (this.totalData[i].companyRecordStatus < 2) {
                    this.workStatues.notSubmitted++
                } else {
                    this.workStatues.alreadyExamined++
                }
            }
        },

        initialize() {
            // console.log("id:")
            // console.log(this.userId)
            this.listLoading = true
            getAllRecords({"userId": this.userId}).then(response => {
                // console.log(response.data)
                // this.totalData = response.data.items.sort((a, b) => this.cmp(a,b))
                this.totalData = response.data.sort((a, b) => this.cmp(a,b))
                this.getWorkStatues()
                // console.log(this.totalData)
                this.filteredData = this.totalData
                this.cities = Array.from(new Set(this.totalData.map(item => item.companyCity)))
                this.cities.splice(0, 0, '全部')
                // console.log(this.cities)
                this.display()
                // console.log(this.showData)
                this.listLoading = false // 加载完列表就可以认为加载完成
            })
        },

        filterData() {
            this.filteredData = this.totalData.filter(item => {
                
                if (this.filter.examineStatusCode == 1 && item.companyRecordStatus !== 2) {
                    return false
                }
                if (this.filter.examineStatusCode == 2 && item.companyRecordStatus <= 2) {
                    return false
                }
                if (this.filter.city !== '全部' && this.filter.city && this.filter.city !== item.companyCity) {
                    return false
                }
                if (this.filter.search) {
                    return item.companyChineseName.indexOf(this.filter.search) != -1
                }
                return true
            })
            this.page.totalItems = this.filteredData.length
        },

        display() {
            this.filterData()
            this.showData = this.filteredData.slice((this.page.currentPage - 1) * this.page.pageSize, Math.min(this.page.totalItems, this.page.currentPage * this.page.pageSize))
        },
        
        passSingle(val) {
            this.selected.selectedItems = [val]
            this.selected.selectedNum = 1
            this.passConfirm.showFlag = true
            // console.log("pass:")
            // console.log(this.selected.selectedItems)
        },

        passPatch() {
            this.passConfirm.showFlag = true
        },

        // passRecords() {
        //     this.passSuccess = true
        //     for (var i = 0; i < this.selected.selectedNum; ++i) {
        //         passRecord(this.selected.selectedItems[i]).then(response => {
        //             this.passSuccess = this.passSuccess & response.success
        //         })
        //     }
        //     return Promise.resolve()
        // },

        passRecords(i) {
            if (i < this.selected.selectedNum) {
                passRecord(this.selected.selectedItems[i]).then(response => {
                    this.passSuccess = this.passSuccess & response.success
                    this.passRecords(i + 1)
                })
            } else {
                if (this.passSuccess) {
                    this.$message({
                        type: 'success',
                        message: '通过成功'
                    })
                }
                this.initialize()
                this.passConfirm.showFlag = false
                this.selected.selectedItems = []
                this.selected.selectedNum = 0
                this.selected.multiSelectFlag = false
                this.$refs.inOrderTable.clearSelection()
                this.passSuccess = false
            }
        },

        pass() {
            this.passSuccess = true
            this.passRecords(0)            
        },

        showReturnBack() {
            this.returnBackForm.showFlag = true
            this.returnBackForm.data.reason = ''
            this.returnBackForm.data.otherReasonDescription = ''
        },

        returnBackSingle(val) {
            this.selected.selectedItems = [val]
            this.selected.selectedNum = 1
            this.showReturnBack()
        },

        returnBackPatch() {
            this.showReturnBack()
        },

        // returnBackRecords() {
        //     this.returnBackSuccess = true
        //     for (var i = 0; i < this.selected.selectedNum; ++i) {
        //         this.returnBackData.items = this.selected.selectedItems[i]
        //         this.returnBackData.comments = this.returnBackForm.data
        //         returnBackRecord(this.returnBackData).then(response => {
        //             this.returnBackSuccess = this.returnBackSuccess & response.success
        //         })
        //     }
        //     return Promise.resolve()
        // },

        returnBackRecords(i) {
            if (i < this.selected.selectedNum) {
                this.returnBackData.items = this.selected.selectedItems[i]
                this.returnBackData.comments = this.returnBackForm.data
                returnBackRecord(this.returnBackData).then(response => {
                    this.returnBackSuccess = this.returnBackSuccess & response.success
                    this.returnBackRecords(i + 1)
                })
            } else {
                if (this.returnBackSuccess) {
                    this.$message({
                        type: 'success',
                        message: '退回成功'
                    })
                }
                this.returnBackForm.showFlag = false
                this.initialize()
                this.selected.selectedItems = []
                this.selected.selectedNum = 0
                this.selected.multiSelectFlag = false
                this.$refs.inOrderTable.clearSelection()
                this.returnBackSuccess = false
            }
        },
        
        returnBack() {
            this.returnBackSuccess = true
            this.returnBackRecords(0)
        },

        radio_change(val) {
            // console.log(val)
            this.display()
        },

        selectChange(val) {
            // console.log(val)
            this.display()
        },

        selectByName() {
            // console.log(this.filter.search)
            this.display()
        },

        handleSelectionChange(val) {
            this.selected.selectedNum = val.length;
            this.selected.selectedItems = val;
            this.selected.multiSelectFlag = val.length > 0 ? true : false
            // console.log(this.selected.selectedNum)
            // console.log(this.selected.selectedItems)
        },

        showForm(val) {
            // console.log(val)
            this.showingForm.showFlag = true
            this.showingForm.data = val
            this.activities = []
            getCompanyInfoHistory({companyId: val.companyID}).then(response => {
                // console.log(this.$refs.leftDiv.clientHeight )
                // this.leftDivHeight = this.$refs.leftDiv.clientHeight + 'px'
                var histories = response.data
                var len = response.data.length
                for (var i = 0; i < len; ++i) {
                    var historyType = histories[i].historyType
                    this.activities.push({
                        name: historyType == 0 ? "企业提交备案信息" : historyType == 3 ? "省审核退回" : "省审核通过",
                        idea: histories[i].historyComment,
                        color: historyType == 0 ? "#4E97FF" : historyType == 3 ? "#dd0000" : "#00dd00",
                        timestamp: histories[i].historyDate,
                    })
                }
            })
        },


        changePageSize(val) {
            this.page.pageSize = val;
            this.display();
        },

        changeCurrentPage(val) {
            this.page.currentPage = val;
            this.display();
        },

        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 1) {
                return 'odd-row';
            } else {
                return 'even-row'
            };
        },

        getRowKey(row) {
            return row.companyID;
        },
    },
}

</script>

<style scoped>
/* .el-table .table_header {
    background-color: rgb(211, 249, 249);
} */

/* .el-form-item {
    margin: 10px;
} */

#examineProgress {
    margin-top: 0px;
    font-size: 23px;
    border-bottom: 1px solid;
    margin-bottom: 0;
    text-align: center;
    width: 100%;
    height: 30px;
    line-height: 23px;
}

#examineProgress :nth-child(2) {
    margin-left: 100px;
}

#examineProgress :nth-child(3) {
    margin-left: 100px;
}

#examineProgress :nth-child(4) {
    margin-left: 100px;
}


.el-table {
    margin-bottom: 15px;
}

.el-pagination {
    text-align: center;
}

.item1 {
    margin-top: 10px;
    margin-bottom: 6px;
}

.item2 {
    margin-bottom: 15px;
}

.dialogDiv2{
    max-height: 560px;
    /* background-color: magenta; */
    display: block;
    overflow-y: scroll;
}
.dialogDiv2::-webkit-scrollbar {display:none}

</style>